<template>
  <div>
    <el-divider>基本信息</el-divider>
    <div class="dialog_left children">
      <div>
        <Image-preview :src="form.image" width="84px" height='84px'></Image-preview>
      </div>
      <div>
        <el-descriptions direction="vertical" :column="8" border>
          <el-descriptions-item label="供应商编号">{{ form.supplierNum || '-' }}</el-descriptions-item>
          <el-descriptions-item label="供应商名称">{{ form.supplierName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ form.liaison || '-' }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ form.phone }} </el-descriptions-item>
          <el-descriptions-item label="地址">{{ form.addr || '-' }}</el-descriptions-item>
          <el-descriptions-item label="评级">{{ form.grade * 1 + 1 || '-' }} 星</el-descriptions-item>
          <el-descriptions-item label="官网">{{ form.website || '-' }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ form.remark || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <el-divider>相关附件</el-divider>
    <el-link :disabled="!form.file" type="primary" :href="form.file" target="_blank">
      <i class="el-icon-document"></i>
      <span>下载附件{{ handleSubstring(form.file) }}</span>
    </el-link>
    <el-divider>物料/设备信息</el-divider>
    <el-tabs v-model="tabsname" tab-position="left" @tab-click="handleClickTabs">
      <!-- -----------------------------------------------------相关设备-------------------------------------------------------------- -->
      <el-tab-pane name="1">
        <span slot="label"><i class="el-icon-data-analysis"></i> 相关设备</span>
        <transition name="el-zoom-in-top">
          <div v-show="show1">
            <el-table :data="EquipmentList" style="width: 100%">
              <el-table-column label="序号" width="180">
                <template slot-scope="scope">
                  <div> {{ scope.$index + 1 }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="assetNum" label="资产编号" width="180">
                <template slot-scope="scope">
                  <div> {{ scope.row.assetNum || '-' }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="equipmentNum" label="设备编号">
              </el-table-column>
              <el-table-column prop="equipmentName" label="设备名称">
              </el-table-column>
              <el-table-column label="品牌">
                <template slot-scope="{row}">
                  <div> {{ row.brand || '-' }} </div>
                </template>
              </el-table-column>
              <el-table-column label="规格型号">
                <template slot-scope="{row}">
                  <div> {{ row.model || '-' }} </div>
                </template>
              </el-table-column>
              <el-table-column label="所属部门">
                <template slot-scope="{row}">
                  <div> {{ row.deptName || '-' }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="placeName" label="位置">
                <template slot-scope="scope">
                  <div> {{ scope.row.placeName || '-' }} </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </transition>
      </el-tab-pane>
      <!-- -----------------------------------------------------相关物料-------------------------------------------------------------- -->
      <el-tab-pane name="2">
        <span slot="label"><i class="el-icon-data-line"></i> 相关物料</span>
        <transition name="el-zoom-in-top">
          <div v-show="show2">
            <el-table :data="MaterialList" style="width: 100%">
              <el-table-column label="序号" width="180">
                <template slot-scope="scope">
                  <div> {{ scope.$index + 1 }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="materialNum" label="物料编号" width="180">
              </el-table-column>
              <el-table-column prop="materialName" label="物料名称">
              </el-table-column>
              <el-table-column prop="typeName" label="类别">
              </el-table-column>
              <el-table-column prop="model" label="规格型号">
                <template slot-scope="scope">
                  <div> {{ scope.row.model || '-' }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="unitName" label="单位">
              </el-table-column>
              <el-table-column prop="address" label="类型">
                <template slot-scope="{row}">
                  <dict-tags :options="SparePartsAndConsumables" :value="row.kind" />
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div> {{ scope.row.remark || '-' }} </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </transition>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listDetail, listEquipment, listMaterial } from '@/api/purchasing/supplier'
export default {
  name: 'detailed',
  props: {
    parentid: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      form: {},//基本信息
      EquipmentList: [],//相关设备
      MaterialList: [],//相关物料
      tabsname: '1',
      show1: false,
      show2: false,
    }
  },
  created () {
    this.getlist1();
    this.getlist2()
  },
  methods: {
    async getlist1 () {
      const { data: res1 } = await listDetail(this.parentid);
      this.form = res1
    },
    async getlist2 () {
      this.show1 = true
      const { data: res2 } = await listEquipment({ 'params[supplierIds]': this.parentid, 'params[scope1]': 1, 'params[scope3]': 1 });
      this.EquipmentList = res2
    },
    async getlist3 () {
      this.show2 = true
      const { data: res3 } = await listMaterial({ supplierId: this.parentid });
      this.MaterialList = res3
    },
    // 适用设备展示数据-----------------------------------------------------------------------
    handleeaPartInfoVos (val) {
      if (val && val !== undefined) {
        return val.map(item => item.equipmentName).join(',')
      } else {
        return '-'
      }
    },
    handleSubstring (str) {
      if (str) {
        const index = str.lastIndexOf(".");
        str = str.substring(index + 1, str.length);
        return '.' + str
      }
    },
    handleClickTabs (row) {
      if (row.name == 1) {
        this.show2 = false;
        this.getlist2();
      }
      if (row.name == 2) {
        this.show1 = false;
        this.getlist3();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  width: 90%;
  margin: 0px auto;
}

.dialog_left {
  width: 100%;
  display: flex;

  &_image {
    width: 85px;
  }
}

// .dialog_left>div:nth-child(1){
//   flex:1
// }
.dialog_left>div:nth-child(2) {
  flex: 10;
  margin-left: 10px
}

/* el-descriptions-item 文字居中 */
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}
</style>